<template>
  <div>
    <el-container class="manager-container">
      <!-- this is manager page -->
      <!-- 主体区域 -->
      <el-main>
        <!-- 面包屑 -->
        <div class="bg-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/student/studenthomepage' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>我的成绩</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- 展示成绩分析 -->
        <el-row class="row-card">
          <el-card>
            <el-col :span="16" class="header-col"
              >所修门数: {{ examNum }}&nbsp;&nbsp;&nbsp;
              所修总学分: {{ allCredit }}&nbsp;&nbsp;&nbsp;
              平均成绩: {{ averageScore }}</el-col
            >
          </el-card>
        </el-row>

        <!-- 展示每门课的成绩 -->
        <el-card class="table-card" style="margin-bottom: 10px">
          <el-table :data="SelfScoreTable" size="small" border>
            <el-table-column
              label="课程名称"
              align="center"
              prop="course_name"
            ></el-table-column>
            <el-table-column
              label="上课老师"
              align="center"
              prop="teacher_name"
            ></el-table-column>
            <el-table-column
              label="学分"
              align="center"
              prop="credict"
            ></el-table-column>
            <el-table-column
              label="是否缺考"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row.is_absent === 0 ? '否' : '是' }}
              </template>
            </el-table-column>
            <el-table-column
              label="平时成绩"
              align="center"
              prop="usual_score"
            ></el-table-column>
            <el-table-column
              label="考试成绩"
              align="center"
              prop="exam_score"
            ></el-table-column>
            <el-table-column
              label="综合成绩"
              align="center"
              prop="final_score"
            ></el-table-column>
            <el-table-column
              label="成绩排名"
              align="center"
              prop="score_rank"
            ></el-table-column>
          </el-table>

          <!-- 分页 -->
          <el-pagination
            background
            style="float: right; padding: 10px;"
            :page-size="10"
            @current-change="handleCurrentChange"
            layout="total, prev, pager, next"
            :total="examNum">
          </el-pagination>
        </el-card>

        <!-- 展示可视化图形数据分析 -->
        <el-row class="data-graph" :gutter="1">
          <el-col :span="8" style="margin-top: 10px;" :offset="0">
            <el-card class="row-card">
              <div id="pie-chart"></div>
            </el-card>
          </el-col>
          <el-col :span="16" style="margin-top: 10px;" :offset="0">
            <el-card class="row-card">
              <div id="bar-chart"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
const echarts = require("echarts");
// const echarts = require('echarts/lib/echarts')
// require('echarts/lib/chart/bar')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/legend')
export default {
  data() {
    return {
      SelfScoreTable: [],
      examNum: 0,
      currentPage: 1,
      allCredit: 0,
      averageScore: 0,
    };
  },
  created() {
    // 显示学生成绩
    this.GetSelfScoreList();
  },
  mounted() {
    this.renderPieChart()
    this.renderBarChart();
  },
  methods: {
    // 获取所有的分数
    async GetSelfScoreList() {
      const { data: res } = await this.$http.post(
        `score/student/getSelfScoreList?page=${this.currentPage - 1}&rows=10`
      );
      console.log(res);
      if (res.state != true) return this.$message.error(res.msg);

      this.examNum = res.detail.courseNumber;
      this.SelfScoreTable = res.detail.scoreList.list
      this.allCredit = res.detail.allCredit
      this.averageScore = res.detail.averageScore.toFixed(1)
    },

    // 柱状图
    async renderBarChart() {
      const chart = echarts.init(document.getElementById("bar-chart"));

      const { data: res } = await this.$http.post(
        `score/student/getSelfScoreList?page=${this.currentPage - 1}&rows=10`
      );

      const bar_data = res.detail.bar.bars
      const bar_name = res.detail.bar.data

      var option = {
        title: {
          text: "考试分数统计",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          data: ['平时成绩', '考试成绩', '综合成绩'],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          // data: [
          //   'asp.net程序设计',
          //   '高级语言程序设计',
          //   '计算机网络',
          //   '操作系统',
          //   '数据结构',
          //   '计算机组成原理'
          // ],
          data: bar_name,
          axisLabel: { //设置x轴的字
            show:true,
            rotate: 40,
            interval:0,//使x轴横坐标全部显示
          },
        },
        yAxis: [
          {
            type: "value",
          },
        ],
        // series: [
        //   {
        //     name: '平时成绩',
        //     type: 'bar',
        //     data: [34, 46, 34, 5, 75, 67]
        //   },
        //   {
        //     name: '考试成绩',
        //     type: 'bar',
        //     data: [45, 2, 34, 56, 32, 45]
        //   },
        //   {
        //     name: '综合成绩',
        //     type: 'bar',
        //     data: [12, 32, 32, 43, 34, 4]
        //   }
        // ],
        series: bar_data
      }

      // const { data: res } = await this.$http.post(``)
      // option.xAxis.data = res.detail.data
      // option.series = res.detail.data

      chart.setOption(option)
    },

    // 饼图
    async renderPieChart () {
      const chart = echarts.init(document.getElementById("pie-chart"));

      const { data: res } = await this.$http.post(
        `score/student/getSelfScoreList?page=${this.currentPage - 1}&rows=10`
      );

      const pie_data = res.detail.pie

      var option = {
        title: {
          text: '各门课学分占比',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          // orient: 'vertical',
          bottom: 'bottom'
        },
        series: [
          {
            name: '学分占比',
            type: 'pie',
            radius: '50%',
            // data: [
            //   { value: 1048, name: 'Search Engine' },
            //   { value: 735, name: 'Direct' },
            //   { value: 580, name: 'Email' },
            //   { value: 484, name: 'Union Ads' },
            //   { value: 300, name: 'Video Ads' }
            // ],
            data: pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      // const { data: res } = await this.$http.post(``)
      // option.series = res.detail.data

      chart.setOption(option)
    },

    // 更改当前页
    handleCurrentChange (page) {
      this.currentPage = page
      this.getScoreTable()
    },

  },
};
</script>

<style lang="less" scoped>
.manager-container {
  height: 100vh;
  background-color: #f0f1f7;

  .el-main {
    padding: 0px;

    .row-card {
      margin: 0px 20px 20px;

      .header-col {
        margin-top: 6px;
        margin-bottom: 20px;
      }
    }

    .table-card {
      margin-left: 20px;
      margin-right: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      line-height: 35px;
      margin-left: 2%;
    }

    #pie-chart {
      height: 400px;
    }

    #bar-chart {
      height: 400px;
    }
  }
}
</style>
